<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout 1</title>
<jsp:include page="inc/include-head.jsp" flush="true" />
</head>
<body>
	<div class="topo shadow-cinza">
		<div class="col-sm-2"></div>
		<div class="col-sm-4">
				<span class="glyphicon glyphicon-chevron-down"></span><span class="glyphicon glyphicon-user"></span> Antônio
		</div>
			<div class="col-sm-2 navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<div class=" col-sm-6 collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav pull-right">
					<li><a href="layout1.jsp" class="navbar-brand">Principal</a></li>
					<li><a href="layout1-usuario.jsp">Usu&aacute;rios</a></li>
					<li><a href="layout1-historico">Hist&oacute;rico</a></li>
				</ul>
			</div>

		</div>
	

	<div class="col-sm-3"></div>
	<div class="col-sm-6 conteudo">
		<div class="col-sm-4 usuarios usuario10">
			<div class="box-callout box-callout-azul">
				Antonio<span class="icon-trash"></span><span class="icon-pencil" onclick="abrirDadosUsuario(10);"></span>
			  <div class="box-informacoes" id="box-informacoes-usuario10" style="display:none;">
				<b>Nome</b>: Antonio<br/>
				<b>E-mail</b>: antonio@gmail.com<br/>
				<b>Sexo</b>: Masculino<br/>
				<b>Permissão</b>: Acesso total<br/>
			  </div>
			</div>
		</div>
		<div class="col-sm-4 usuarios usuario12">
			<div class="box-callout box-callout-azul">
				Bento<span class="icon-trash"></span><span class="icon-pencil" onclick="abrirDadosUsuario(12);"></span>
			</div>
		</div>
		<div class="col-sm-4 usuarios usuario13">
			<div class="box-callout box-callout-azul">
				Marta<span class="icon-trash"></span><span class="icon-pencil" onclick="abrirDadosUsuario(13);"></span>
			</div>
		</div>
		<div class="col-sm-4 usuarios">
			<div class="box-callout box-callout-azul">
				Natalia<span class="icon-trash"></span><span class="icon-pencil" onclick="abrirDadosUsuario(14);"></span>
			</div>
		</div>
		<div class="col-sm-4 usuarios">
			<div class="box-callout box-callout-azul">
				Paulo<span class="icon-trash"></span><span class="icon-pencil" onclick="abrirDadosUsuario(15);"></span>
			</div>
		</div>
	</div>

	<div class="col-sm-3"></div>

	<div class="rodape"></div>


	<script type="text/javascript">
		$(function() {
			var mySwiper = $('.swiper-container').swiper({
				mode : 'horizontal',
				loop : true,
				slidesPerView : 4
			});
		})
		
		function abrirDadosUsuario(id){
			console.log(id);	
			$.when()
			  .then(function(){
				$(".usuario"+id).fadeIn();
				$(".usuario"+id).removeClass("col-sm-4");
				$(".usuario"+id).addClass("col-sm-6");
				$(".usuario"+id+" #box-informacoes-usuario"+id).show();

				$( ".usuario"+id +" .box-callout").animate({
					height: "400px"
				  }, 500 );
				var newclick = new Function();
				$(".usuario"+id+" .box-callout .icon-pencil").attr('onclick', 'fecharDadosUsuario('+id+')').click(newclick);
				
			  }
			);
			
		}
		function fecharDadosUsuario(id){
			$.when(
				$(".usuario"+id).removeClass("col-sm-6"),
				$(".usuario"+id).addClass("col-sm-4"),
				$( ".usuario"+id +" .box-callout").css("height", ""),
				$(".usuario"+id+" .box-callout .icon-pencil").attr('onclick', 'abrirDadosUsuario('+id+')'),
				$(".usuario"+id+" #box-informacoes-usuario"+id).hide()
			).then($(".usuarios").fadeIn(300));
			};
			
		
	</script>
</body>
</html>